$(function () {
    // (1): 登录与注册切换
    /**
     * - 点击去登录显示登录面板
     * - 点击去注册显示注册面板
     */
    $('#go-reg').on('click', function () {
        // 显示注册面板
        $('.reg-content').show()
        // 隐藏登录面板
        $('.login-content').hide()
    })
    $('#go-login').on('click', function() {
       // 隐藏注册面板
       $('.reg-content').hide()
       // 显示登录面板
       $('.login-content').show()
    })

    // (2): 设置表单验证规则
    // 1. 导入layui的form验证模块
    const form = layui.form
    // 2. 创建验证规则
    form.verify({
        username: [/^[a-z0-9]{5,10}$/i, '用户名必须为5-10位的数字或字母'], // 验证正则表达式
        password: [/^\S{6,12}$/, '密码必须为6-12, 并且不能为空格!'],
        rpPassword: function (value) { // 自定义验证
            // 判断是否与密码相同
            // 获取密码框的内容
            const pwd = $('.reg-content [name=password]').val()
            if (value !== pwd) {
                return '两次密码不相同'
            }
        }
    })

    // (3): 监听注册表单的提交 实现注册功能
    const layer = layui.layer // layer是弹窗模块
    $('#reg-form').on('submit', function() {
        // 1. 通过表单获取表单收集的数据
        const data = form.val('reg-form')
        // 2. 发起请求 进行注册
        $.post('/api/reguser', data)
            .then(res => {
                if (res.status !== 0) {
                    // 注册失败
                    return layer.msg(res.message || '注册失败')
                }
                // 注册成功
                layer.msg('注册成功')
                // 清空表单内容
                this.reset()
                // 跳转到登录
                $('#go-login').click()
            })
        return false
    })
    
    // (4): 监听登录表单的提交 实现登录功能
    $('#login-form').on('submit', function() {
        // 1. 获取用户名和密码
        const data = form.val('login-form')
        // 2. 发送请求 进行登录
        $.post('/api/login', data)
            .then(res => {
                //  3. 登录失败 -> 提示
                if (res.status !== 0) {
                    return layer.msg(res.message || '登录失败！')
                }
                //  3. 登录成功 -> 跳转到首页
                layer.msg('登录成功')
                // 将token保存在本地中（后续所有的请求都需要） localStorage
                // setItem(key, value)  key存储名  value存储值
                // token 用户凭证（用于服务器验证你是哪一个用户）
                localStorage.setItem('BIG_EVENT_TOKEN', res.token)
                // 跳转到首页
                location.href = '/index.html'
            })
        // 阻止表单提交
        return false
    })
})